<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
	</style>
	<body>
		<div id="app">
			<!-- 1.事件调用的方法没有参数 -->
			<button @click="btn1Click()">按钮1</button>
			<button @click="btn1Click">按钮1</button>
			
			<!-- 2.事件调用的方法需要传入参数，1.不传参数：形参会是undedifed  2.不带()：Vue默认会将浏览器生成的 event对象 传入形参 -->
			<!-- <button @click="btn2Click(123)">按钮2</button> -->
			<!-- <button @click="btn2Click()">按钮2</button> -->
			<button @click="btn2Click">按钮2</button>
			
			<!-- 3.事件调用的方法需要传参，又要获取event对象 -->
			<!-- 手动获取 浏览器的 event对象    加$event -->
			<button @click="btn3Click(123,$event)">按钮3</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					num: 0
				},
				methods: {
					btn1Click(){
						console.log('btn1Click')
					},
					btn2Click(event){
						console.log(event)
					},
					btn3Click(a,event){
						console.log(a,event)
					}
				}
			});
		</script>
	</body>
</html>